<template>
  <div id="radios" class="page">
    <div class="content" style="margin-top:20px;">
      <div id="left">
        <el-menu default-active="0" class="el-menu-vertical-demo">
          <el-menu-item v-for="(item,index) in category" :key="index" :index="index.toString()">
            <template slot="title">
              <img :src="item.pic56x56Url" :title="item.name" width="50px;" height="50px;">
              <span @click="getCategoryHot(item.id)"><a>{{item.name}}</a></span>
            </template>
          </el-menu-item>
        </el-menu>
      </div>
      <div id="right">
          <div class="image" v-for="(element,index) in item" :key="index">
            <a href="javascript:void(0)">
              <img :src="element.intervenePicUrl" :title="element.desc" width="100%">
              <span class="desc">{{element.lastProgramName}}</span>
            </a>
          </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "radios",
  data(){
    return {
        category:[],
        item:[],
    }
  },
  methods:{
      getCategory(){
          this.$get("https://autumnfish.cn/dj/catelist").then(result => {
              this.category = result.categories;
          })
      },
      getCategoryHot(index){
        this.$get("https://autumnfish.cn/dj/radio/hot?cateId=" + index).then(result => {
          console.log(result.djRadios);
          this.item = result.djRadios;
        });
      }
  },
  created() {
      this.getCategory();
      this.getCategoryHot(3);
  }
}
</script>

<style scoped>
#radios #left{
  width:200px;
  margin-right:20px;
}
#radios #right{
  display: flex;
  flex-wrap: wrap;
}
.image{
  width:180px;
  margin:0px 20px 25px 10px;
}
</style>
